<template>
	<view class="wrap">
		<!-- <navbar>
			<view class="user_nav" v-if="userInfo.userLevel == 0">
				普通用户1
			</view>
			<view class="user_nav" v-if="userInfo.userLevel == 1">
				普通会员
				<image class="img" src="/static/vip.png"></image>
			</view>
			<view class="user_nav" v-if="userInfo.userLevel == 2">
				二级代理
				<image class="img" src="/static/vip2.png"></image>
			</view>
			<view class="user_nav" v-if="userInfo.userLevel == 3">
				一级代理
				<image class="img" src="/static/vip3.png"></image>
			</view>
			<view class="user_nav" v-if="userInfo.userLevel == 4">
				合伙人
				<image class="img" src="/static/vip4.png"></image>
			</view>
		</navbar> -->
		<view class="header">
			<image class="bg" src="/static/new_images/mine-header.png"></image>
			<view class="level" v-if="userInfo.userLevel == 0" style="padding-right:0;">{{$t('ptyh')}}</view>
			<view class="level" v-if="userInfo.userLevel == 1">{{$t('qingtong')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="level" v-if="userInfo.userLevel == 2">{{$t('baiyin')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="level" v-if="userInfo.userLevel == 3">{{$t('huangjin')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="level" v-if="userInfo.userLevel == 4">{{$t('baijin')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="level" v-if="userInfo.userLevel == 5">{{$t('zhuanshi')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="level" v-if="userInfo.userLevel == 6">{{$t('jingying')}}<image :src="'/static/new_images/v-'+userInfo.userLevel+'.png'"></image></view>
			<view class="user_top">
				<image class="left"  @tap="upload('frontImg')" :src="userInfo.headPortrait"></image>
				<view class="right">
					<view class="text1">{{userInfo.name}}</view>
					<view class="text2">
						<input class="user_Dynamic" v-if="shoe_userDynamic" focus v-model="userInfo.userDynamic" type="text" maxlength="20" @blur="diy_Dynamic"/>
						<view v-else class="userDynamic">
							{{$t('jianjie')}}：{{userInfo.userDynamic}}
							<u-icon name="icon-bainji" @tap="shoe_userDynamic = !shoe_userDynamic" custom-prefix="custom-icon" size="28" style="margin-left: 10rpx;"></u-icon>
						</view>
						
					</view>
				</view>
			</view>
			<view class="assets_block">
				<view class="assets_block_title"></view>
				<view class="assets_block_Balance">
					<view class="left">
						<u-icon name="qianbao" custom-prefix="custom-icon" size="44"></u-icon>
						<text class="text">{{$t('qianbao')}}</text>
					</view>
					<!-- <view class="Balance" @tap="toPage2('/pages/User/Wallet/Wallet')"> -->
					<view class="Balance">
						{{userInfo.usdtBalance}}
						<!-- <u-icon name="arrow-right" color="#333" custom-prefix="custom-icon" size="70"></u-icon> -->
					</view>
				</view>
				<view class="assets_block_btn">
					<view class="btn btn2" @tap="toPage2('/pages/User/TopUp/TopUp?tokenName=USDT')"><text class="text">{{$t('chongzhi')}}</text></view>
					<view class="btn" @tap="toPage2('/pages/User/Cashout/Cashout?tokenName=USDT')"><text class="text">{{$t('tixian')}}</text></view>
				</view>
			</view>
		</view>
		<view class="tom-container">
			<view class="user_nr">
				<view class="link_list">
					<view class="list" v-for="(item,index) in link_list" :key="index" @tap="toPage(item)">
						<view class="list_left">
							<image class="img" :src="item.icon"></image>
							<text class="text" :class="{'text_actilo':item.title == '申请开通代理'}">{{item.title}}</text>
						</view>
						<view class="list_right">
							<text class="text" :style="{'color':item.color}">{{item.tips}}</text>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="50"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :title="$t('tishi')" :confirmText="$t('queding')" :cancelText="$t('quxiao')" v-model="login_show" show-cancel-button :title-style="{'font-weight': 'bold','font-size':'36rpx'}" @confirm="login_tuchu">
			<view class="pop_login_title">
				{{$t('sfqdtczh')}}
			</view>
		</u-modal>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue';
	import helangCompress from '@/components/helang-compress/helang-compress';
	import { mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				show:false,
				Exchange:[{label:this.$t("bian"),value:''},{label:this.$t("huobi"),value:''}],
				ExchangeIndex:0,
				login_show:false,
				shoe_userDynamic:false,
				user_img:'',
			}
		},
		computed:{
			...mapState(['userInfo', 'version', 'token']),
			link_list(){
				return [
					// {icon:'/static/user_link/1.png',title:'申请开通代理',tips:'了解特权',link:'/pages/User/Agent/Agent',color:'#FF6666'},
					{icon:'/static/new_images/mine-1.png',title:this.$t("index.zcjl"),tips:'',link:'/pages/User/AssetRecords/AssetRecords'},
					{icon:'/static/new_images/mine-2.png',title:this.$t("bdapi"),tips:'',link:'/pages/User/apiManage/apiManage'},
					{icon:'/static/new_images/mine-3.png',title:this.$t("jyskh"),tips:'',link:'/pages/User/OpenAnAccount/OpenAnAccount'},
					{icon:'/static/new_images/mine-4.png',title:this.$t("wdtd"),tips:'',link:'/pages/User/Myteam/Myteam'},
					{icon:'/static/new_images/mine-5.png',title:this.$t("index.yqhy"),tips:'',link:'/pages/User/LnviteFriends/LnviteFriends'},
					{icon:'/static/new_images/mine-6.png',title:this.$t("ggzx"),tips:'',link:'/pages/User/AnnouncementList/AnnouncementList'},
					{icon:'/static/new_images/mine-7.png',title:this.$t("dqbb"),tips:this.version,link:'',color:'#333'},
					{icon:'/static/new_images/mine-8.png',title:this.$t("grsz"),tips:'',link:'/pages/User/Personal/Personal',},
					{icon:'/static/new_images/mine-9.png',title:this.$t("tcdl"),tips:'',link:'/'},]
			}
		},
		onShow() {
			this.indexData();
		},
		onHide() {
			this.show = false;
		},
		methods: {
			indexData(){
				// console.log(this.version)
				uni.showLoading({
					mask: true,
					title: this.$t("loading.title")
				});
				var that = this;
				this.$api.userApi.getMyAssets().then(res => {
					this.Exchange[0].value = res.data.binanceUrl;
					this.Exchange[1].value = res.data.huobiUrl;
					that.$store.commit('updateUserInfo', res.data);
					uni.hideLoading();
				}).catch(res =>{
					uni.hideLoading();
				})
			},
			toPage(info){
				var that= this;
				/*页面跳转*/
				if(info.link){
					if(info.title =='退出登录'){
						this.login_show = true;
					}else{
						uni.navigateTo({
							url: info.link
						});
					}
				}
			},
			toBrowser(){
				this.show = false;
				plus.runtime.openURL(this.Exchange[this.ExchangeIndex].value);
			},
			login_tuchu(){
				uni.reLaunch({
					url: '/pages/Login/Login'
				});
			},
			toPage2(link){
				uni.navigateTo({
					url: link
				});
			},
			diy_Dynamic(){
				var that = this;
				uni.showLoading({
					mask: true,
					title: this.$t("loading.title")
				});
				this.$api.userApi.updateDynamic({
					dynamic:this.userInfo.userDynamic
				}).then(res => {
					this.shoe_userDynamic = false;
					this.indexData();
				}).catch(res =>{
					uni.hideLoading();
					this.shoe_userDynamic = false;
				})
			},
			// 上传头像
			upload(type) {
				if (this.sts == 2 || this.sts == 1) return;
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.$utils.loading(this.$t("zzscz"));
						that.$refs.helangCompress
							.compress({
								src: res.tempFilePaths[0],
								maxSize: 750,
								fileType: 'jpg',
								quality: 0.85,
								minSize: 500 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
							})
							.then(async res => {
								// 压缩成功回调
								// console.log(res)
								that[type] = await that.$utils.upload(res);
								that.$api.userApi
									.updateHeadPortrait({
										headPortraitLink: that[type].fileUrl
									})
									.then(res => {
										that.$api.userApi.getMyAssets().then(res => {
											that.$store.commit('updateUserInfo', res.data);
											that.$utils.toast(this.$t("xgcg"));
										});
									})
									.catch(res => {
										that.$utils.toast(this.$t("xgsb"));
									});
								console.log(that[type]);
							})
							.catch(err => {
								that.$utils.toast(this.$t("tpyssb"));
								// 压缩失败回调
								console.log(err);
							});
					}
				});
			}
		},
		components: {
			navbar
		}
	}
</script>

<style lang="scss" scoped>
.user_nav{
	display:flex;
	justify-content: flex-end;
	width: 100%;
	font-size: 28rpx;
	.img{
		width:32rpx;height: 40rpx;
		margin-left: 16rpx;
	}
}
.header{
	background:#fff;
	position:relative;
	/* #ifdef  APP-PLUS */
	padding-top:calc(50rpx + var(--status-bar-height));
	/* #endif */
	/* #ifdef H5 */
	padding-top:50rpx;
	/* #endif */
	z-index: 2;
	overflow: hidden;
	border-radius:0 0 20rpx 20rpx;
	.bg{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index: -1;
	}
	.level{
		position:absolute;
		/* #ifdef  APP-PLUS */
		top:calc(60rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		top:60rpx;
		/* #endif */
		right:30rpx;
		color:#fff;
		padding-right:68rpx;
		line-height:60rpx;
		image{
			display:block;
			width:60rpx;
			height:60rpx;
			margin:6rpx auto 0;
			position:absolute;
			top:0;
			right:0;
		}
	}
	.user_top{
		padding:30rpx 40rpx 40rpx 40rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		.left{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			background-color: #fff;
			border-radius: 100%;
		}
		.right{
			color: #fff;
			height: 100rpx;
			.text1{
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 14rpx;
			}
			.text2{
				font-size: 24rpx;
				color:#D1D6E5;
				.userDynamic{
					margin-top: 4rpx;
				}
				
			}
			.user_Dynamic{
				color: #fff;
				font-size: 24rpx;
				border: 2rpx solid $page-bg;
				border-radius: 8rpx;
				padding:0rpx 20rpx;
				height: 44rpx;
			}
		}
	}
	.assets_block{
		margin: 0px 40rpx;
		border-radius: 20rpx;
		padding: 16rpx 50rpx 24rpx 50rpx;
		color: #fff;
		.assets_block_Balance{
			text-align: center;
			padding:24rpx 30rpx 38rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				.text{
					font-size: 36rpx;
					margin-left: 10rpx;
					font-weight: bold;
				}
			}
			.Balance{
				font-size: 36rpx;
				font-weight: 800;
				max-width: 440rpx;
				word-break: break-word;
				white-space: pre-line;
				text-align: right;
				color: #fff;
				display: flex;
				align-items: center;
			}
		}
		.assets_block_btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			padding: 0px 32rpx;
			.btn{
				width: 180rpx;height: 70rpx;
				background-color: rgba(255,255,255,0.4);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 10rpx;
				.text{
					font-size: 36rpx;
				}
			}
			.btn2{
				background:transparent;
				 border: 2rpx solid $text-color;
				 border:1rpx solid #12E8E9;
				 color: #12E8E9;
			}
		}
	}
}
// .user_top::before{
// 	position: absolute;
// 	content: '';
// 	width: 100%;height: 140%;
// 	background-color: $text-color;
// 	left: 0;top: 0;
// 	z-index:-1;
// 	border-radius: $tom-block-radius;
// }
.user_nr{
	flex: 1;
	z-index: 2;
	display: flex;
	flex-direction:column;
	.link_list{
		background-color: #fff;
		flex: 1;
		margin-top: 30rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 30rpx;
			border-bottom:2rpx solid $page-bg ;
			.list_left{
				color: $tom-text-color;
				display: flex;
				align-items: center;
				.img{
					width: 50rpx;height: 50rpx;
					margin-right: 24rpx;
				}
				.text{
					font-size: 28rpx;
					font-weight: bold;
				}
				.text_actilo{
					font-size: 32rpx;
				}
			}
			.list_right{
				display: flex;
				align-items: center;
				.text{
					font-size: 24rpx;
				}
			}
		}
	}
}
.pop_nr{
	line-height: 0;
	.img{
		width: 630rpx;height: 430rpx;
	}
	.pop_nr_block{
		background-color: #fff;
		border-radius: 0rpx 0rpx 30rpx 30rpx ;
		line-height: normal;
		text-align: center;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			color: $tom-text-color;
			text-align: center;
			padding: 20rpx 0rpx;
		}
		.btn_list{
			display: flex;
			justify-content: space-around;
			.btn{
				margin: 30rpx 0rpx;
				padding: 10rpx 40rpx;
				border-radius: 10rpx;
				background-color: $tom-text-sub-color;
				color: #fff;
			}
			.btn1{
				background-color: $text-color;
			}
		}
		.sub{
			padding: 10rpx 50rpx;
			border-radius: 10rpx;
			background-color: $text-color;
			display: inline-block;
			margin: 30rpx 0rpx;
			color: #fff;
		}
	}
}
</style>
